<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="12">
        <table-header>
          <span slot="title">案例待审核</span>
          <span slot="more" @click="jumpMain(1)">查看更多</span>
        </table-header>
        <el-table
          element-loading-text="Loading"
          highlight-current-row
          row-class-name="ele-table-row"
          :data="tableData1"
          style="width: 100%">
          <el-table-column label="序号" width="50">
            <template slot-scope="scope">
              {{scope.$index + 1 + 10 * (page.page - 1)}}
            </template>
          </el-table-column>
          <el-table-column label="作品名称" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.title}}
            </template>
          </el-table-column>
          <el-table-column label="作品风格" min-width="70" show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.design_style | style}}
            </template>
          </el-table-column>
          <el-table-column label="设计类型" min-width="70">
            <template slot-scope="scope">
              {{scope.row.design_type | type}}
            </template>
          </el-table-column>
          <el-table-column label="加入时间" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.updated_at}}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="76">
            <template slot-scope="scope">
              <el-button type="primary" plain size="mini" @click="jumpDetail(1, scope.row.id)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">
        <table-header>
          <span slot="title">设计师待审核</span>
          <span slot="more" @click="jumpMain(2)">查看更多</span>
        </table-header>
        <el-table
          element-loading-text="Loading"
          highlight-current-row
          row-class-name="ele-table-row"
          :data="tableData2"
          style="width: 100%">
          <el-table-column label="序号" width="50">
            <template slot-scope="scope">
              {{scope.$index + 1 + 10 * (page.page - 1)}}
            </template>
          </el-table-column>
          <el-table-column label="姓名" min-width="60" show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.real_name}}
            </template>
          </el-table-column>
          <el-table-column label="手机号" min-width="95">
            <template slot-scope="scope">
              {{scope.row.phone}}
            </template>
          </el-table-column>
          <el-table-column label="工作年限" min-width="70">
            <template slot-scope="scope">
              {{scope.row.working_age | workingAge}}
            </template>
          </el-table-column>
          <el-table-column label="申请时间" min-width="100" show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.created_at}}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="76">
            <template slot-scope="scope">
              <el-button type="primary" plain size="mini" @click="jumpDetail(2, scope.row.id)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <table-header>
          <span slot="title">产品待审核</span>
          <span slot="more" @click="jumpMain(3)">查看更多</span>
        </table-header>
        <el-table
          element-loading-text="Loading"
          highlight-current-row
          row-class-name="ele-table-row"
          :data="tableData3"
          style="width: 100%">
          <el-table-column label="序号" width="50">
            <template slot-scope="scope">
              {{scope.$index + 1 + 10 * (page.page - 1)}}
            </template>
          </el-table-column>
          <el-table-column label="产品名称" min-width="80">
            <template slot-scope="scope">
              {{scope.row.title}}
            </template>
          </el-table-column>
          <el-table-column label="产品图片" min-width="80">
            <template slot-scope="scope">
              <img :src="qiniuUrl + scope.row.cover" alt="" style="width: 50px;height: 50px;" @click="showPic(scope.row.cover)">
            </template>
          </el-table-column>
          <el-table-column label="发布时间" min-width="120" show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.updated_at}}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="76">
            <template slot-scope="scope">
              <el-button type="primary" plain size="mini" @click="jumpDetail(3, scope.row.id)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="12">
        <table-header>
          <span slot="title">活动待审核</span>
          <span slot="more" @click="jumpMain(4)">查看更多</span>
        </table-header>
        <el-table
          element-loading-text="Loading"
          highlight-current-row
          row-class-name="ele-table-row"
          :data="tableData4"
          style="width: 100%">
          <el-table-column label="序号" width="50">
            <template slot-scope="scope">
              {{scope.$index + 1 + 10 * (page.page - 1)}}
            </template>
          </el-table-column>
          <el-table-column label="活动主题" min-width="80">
            <template slot-scope="scope">
              {{scope.row.title}}
            </template>
          </el-table-column>
          <el-table-column label="活动图片" min-width="80">
            <template slot-scope="scope">
              <img :src="qiniuUrl + scope.row.cover" alt="" style="width: 50px;height: 50px;" @click="showPic(scope.row.cover)">
            </template>
          </el-table-column>
          <el-table-column label="添加时间" min-width="120" show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.updated_at}}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="76">
            <template slot-scope="scope">
              <el-button type="primary" plain size="mini" @click="jumpDetail(4, scope.row.id)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import TableHeader from '../../../components/TableHeader/index'
  // import { designer_get, admin_case_show, admin_merchant_activity_show, admin_merchant_product_show } from '@/api/index'
  import { QINIU_URL } from '@/utils/config'

  export default {
    components: {
      TableHeader
    },
    data() {
      return {
        qiniuUrl: QINIU_URL,
        tableData1: [],
        tableData2: [],
        tableData3: [],
        tableData4: [],
        page: {
          page: 1,
          prePage: 5,
          status: 1
        }
      }
    },
    methods: {
      jumpMain(func) {
        let path = ''
        if (func === 1) {
          path = '/designer/case'
        } else if (func === 2) {
          path = '/designer/designerManagement'
        } else if (func === 3) {
          path = '/merchants/merchantsProduct'
        } else if (func === 4) {
          path = '/merchants/merchantsActivity'
        }
        this.$router.push({ path: path })
      },
      jumpDetail(func, id) {
        let path = ''
        if (func === 1) {
          path = `/designer/case/${id}`
        } else if (func === 2) {
          path = `/designer/designerDetail/${id}`
        } else if (func === 3) {
          path = `/merchants/merchantsProduct/${id}`
        } else if (func === 4) {
          path = `/merchants/merchantsActivity/${id}`
        }
        this.$router.push({ path: path })
      }
    },
    mounted() {
      // admin_case_show(this.page).then(res => {
      //   this.tableData1 = res.data
      // })
      // designer_get(this.page).then(res => {
      //   this.tableData2 = res.data
      // })
      // admin_merchant_product_show(this.page).then(res => {
      //   this.tableData3 = res.data
      // })
      // admin_merchant_activity_show(this.page).then(res => {
      //   this.tableData4 = res.data
      // })
    }
  }
</script>
